<template>
    <div class="container">

        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
  <el-form-item label="名称" prop="name">
    <el-input v-model="ruleForm.name"></el-input>
  </el-form-item>

  <el-form-item label="图片上传" >
    <el-upload
 
  action="http://upload-cn-east-2.qiniup.com"
  :on-success="handleAvatarSuccess"
  :data="qtoken"
  :auto-upload="true"
  >
  <!-- <img v-if="imageUrl" :src="imageUrl" class="avatar">
  <i v-else class="el-icon-plus avatar-uploader-icon"></i> -->
  <el-button>点击上传</el-button>
</el-upload>

  </el-form-item>
 
  
  
  <el-form-item label="选择标签" prop="tags">
    <el-checkbox-group v-model="ruleForm.tags">
      <el-checkbox :label="i.name" name="type" v-for="(i,index) in tags" :key="index" ></el-checkbox>
      
    </el-checkbox-group>
  </el-form-item>

  <el-form-item label="选择分类" prop="type">
    <el-checkbox-group v-model="ruleForm.type">
      <el-checkbox :label="i.name" name="type" v-for="(i,inde) in clist" :key="inde"></el-checkbox>
      
    </el-checkbox-group>
  </el-form-item>

  <el-form-item label="选择类别" prop="ctype">
    <el-radio-group v-model="ruleForm.ctype">
      <el-radio :label="i.name" v-for="(i,ss) in types" :key="ss"></el-radio>
      
    </el-radio-group>
  </el-form-item>

    <el-form-item label="形容" prop="desc">
    <el-input type="textarea" v-model="ruleForm.desc"></el-input>
  </el-form-item>
  
  <el-form-item>
    <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
    <el-button @click="resetForm('ruleForm')">重置</el-button>
  </el-form-item>
</el-form>




    </div>
</template>

<script>
export default {
    name: 'Class',
    data() {
        return {
          baseurl:"http://rrk70lrn7.bkt.clouddn.com/",
          qtoken:"",
          tags:[],
          types:[],
          clist:[],
          imageUrl:"",
        ruleForm: {
          name: '',
          tags:[],
          ctype:[],
          type: "",    
          desc:""
         
        },
        };
    },
   

    mounted() {
      this.getqtoken()
      this.getTage();
      
    },


    methods: {
      getqtoken(){
        this.axios.get("/qniu")
        .then(resp=>{
          console.log(resp)
          this.qtoken=resp.data.qtoken

        })
      },
      getTage(){
        this.axios.get("/gettags")
        .then(resp=>{
          console.log(resp)
          this.tags=resp.data.tags
          this.types=resp.data.types
          this.clist=resp.data.clist
          

        })
      },
      handleAvatarSuccess(res, file) {
      console.log("上传后的结果是>>>", res);
      console.log("上传后文件的的结果是>>>", file);
        this.imageUrl = this.baseurl + res.key
      },
    
    }

};
</script>

<style scoped ></style>
